<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tesco | Home</title>


<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/foxycomplete.css" rel="stylesheet">
<script src="assets/js/jquery-1.7.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
	
</script>
<style type="text/css">
.product {
	border: 1px solid #d6d2c4;
	background-color: white;
	height: 300px;
}

.product-image {
	position: relative;
	top: 20px;
	left: 20px;
	width: 100px;
	height: 100px;
	width: 100px;
}

.product-desc {
	position: relative;
	top: 40px;
	width: 155px;
	height: 140px;
}

#productRow {
	position: relative;
	left: 20px;
}

span {
	font-size: 10pt;
	cursor: pointer;
}

#searchDiv {
	top: -10px;
}

#s {
	height: 20px;
}

#btnSearch {
	background-color: #00539f;
	color: #fff;
}

#wellId {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	width: 281px;
}

#carId {
	height: auto;
	left: 297px;
	position: relative;
	top: -821px;
	width: 842px;
}

#advId {
	position: relative;
	left: 301px;
	top: -824px;
	width: 837px;
	height: auto;
}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		$("#myCarousel").carousel();
	});
</script>

</head>
<body>

	<div class="container">


		<%@include file="header.jsp"%>

		<div class="col-xs-6 pull-right" id="searchDiv">

			<form class="form-inline">
				<div class="form-group">
					<label>Search in &nbsp;&nbsp;</label> <select><option>Furniture</option></select>
				</div>
				<div class="form-group">
					<label>&nbsp;&nbsp;for &nbsp;&nbsp;</label> <input type="text"
						placeholder="Keywords" list="chairs" name="suburb" type="text"
						autocomplete="on" id="s" />
				</div>
				<button class="" id="btnSearch">Search</button>
			</form>


		</div>

		<br /> <br />
		<hr />


		<div class="row-fluid">

			<div class="span3">
				<div class="well" id="wellId">
					<ul id="cat-navi" class="nav nav-list">
						<li class="nav-header">Shop by Product</li>
						<li class="active"><a href="#">Active category</a></li>
						<li><a href="#">New in: Category</a></li>
						<li><a href="#">New in: Category</a></li>
						<li><a href="#">New in: Category</a></li>
						<li><a href="#">New in: Category</a></li>
						<li><a href="#">New in: Category</a></li>
					</ul>

					<hr>

					<ul id="cat-navi2" class="nav nav-list hidden-phone">
						<li class="nav-header">MOST POPURAL</li>
						<li class="active"><a href="#">Active category</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
						<li><a href="#">Category title</a></li>
					</ul>


				</div>



			</div>

		</div>


		<div class="well" id="carId">


			<div id="myCarousel" class="carousel slide" data-ride="carousel">
				<!-- Carousel indicators -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<!-- Carousel items -->
				<div class="carousel-inner">
					<div class="active item">
						<img src="assets/images/furniture.jpg"/>
						<div class="carousel-caption">
							
						</div>
					</div>
					<div class="item">
						<img src="assets/images/fur1.jpg"/>
						<div class="carousel-caption">
							
						</div>
					</div>
					<div class="item">
						<img src="assets/images/fur2.jpg"/>
						<div class="carousel-caption">
							
							
						</div>
					</div>
				</div>
				<!-- Carousel nav -->
				<a class="carousel-control left" href="#myCarousel"
					data-slide="prev"> <span
					class="glyphicon glyphicon-chevron-left"></span>
				</a> <a class="carousel-control right" href="#myCarousel"
					data-slide="next"> <span
					class="glyphicon glyphicon-chevron-right"></span>
				</a>
			</div>



		</div>

		<!-- 
		<div class="well" id="advId">
			<div class="row-fluid">
				<div class="span8">
					<p class="lead"></p>
				</div>
				<div class="span4">
					<a class="btn btn-danger btn-block"
						href="#"
						target="_blank"> GET Product →</a>

				</div>

			</div>
		</div>
 -->
	</div>



	<script type='text/javascript' src='assets/js/jquery.autocomplete.js'></script>
	<script type='text/javascript' src='assets/js/data.js'></script>
	<script type='text/javascript' src='assets/js/foxycomplete.js'></script>

</body>
</html>